<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				padding: 0; margin: 0;
			}
			html,body{
				width: 100%; height: 100%;
			}
			#box{
				margin: auto;
				width: 490px;
				height: 340px;
				border: 1px solid #000000;
				position: relative;
			}
			div.item{
				width: 150px;
				height: 100px;
				border-radius: 5px;
				margin: 5px;
				float: left;
				background: goldenrod;
				border: 1px solid lightgray;
				z-index: 1;
				text-align: center;
				font-size: 60px;
				line-height: 100px;
			}
			div.moving{
				border: 1px dashed gray;
				background: white;
			}
			div.draging{
				width: 150px;
				height: 100px;
				position: absolute;
				background: goldenrod;
				box-shadow: 0 0 4px 2px #555;
				border-radius: 5px; 
				text-align: center;
				font-size: 60px;
				line-height: 100px;
				z-index: 500;
			}
		</style>
	</head>
	<body>
		<div id="box">
			<div class="item">A</div>
			<div class="item">B</div>
			<div class="item">C</div>
			<div class="item">D</div>
			<div class="item">E</div>
			<div class="item">F</div>
			<div class="item">G</div>
			<div class="item">H</div>
			<div class="item">I</div>
		</div>
		<script type="text/javascript" src="js/jquery-1.11.3.js" ></script>
		<script type="text/javascript">
			$("#box div").mousedown(function(e){
				var that = this;
				var disX=e.offsetX, disY=e.offsetY;
				var $clone = $("<div>");
				$clone.addClass("draging").css("left",$(this).position().left).css("top",$(this).position().top).html($(this).html());
				$(this).addClass("moving").html("");
				$clone.appendTo($(this).parent());
				$("#box").on("mousemove",function(e){
					//悬浮层跟随鼠标移动
					$clone.css("left",e.clientX-$(this).offset().left-disX).css("top",e.clientY-$(this).offset().top-disY);
				});
				$clone.mouseup(function(){
					//取消拖拽事件
					$("#box").off("mousemove");
					//判断最小距离，进行交换
					var swapIndex = $(that).index();
					var minDistance = 1000;
//					console.log($("#box div:not(:last)"))
					$("#box div:not(:last)").each(function(){
						var dis = Math.sqrt(Math.pow($clone.position().left-$(this).position().left, 2) +
							Math.pow($clone.position().top-$(this).position().top, 2));
							console.log($(this))
						if(dis<minDistance){
							minDistance = dis;
							swapIndex = $(this).index();
						}
					});
//					console.log(swapIndex)
					
					if(swapIndex == $(that).index() ){
						//恢复原位
						$clone.animate($(that).position(),200,function(){
							$(that).removeClass("moving").html($clone.html());
							$clone.remove();
						})
					} else {
						//交换位置元素
						var $swapEle = $("#box div").eq(swapIndex);
						//生成第二个需要运动的复制元素
						var $clone2 = $("<div>");
						//将复制元素的位置设定在交换元素上
						$clone2.addClass("draging").css("left", $swapEle.position().left ).css("top", $swapEle.position().top ).html($swapEle.html());
						//将交换元素的样式暂时改为移动状态
						$swapEle.addClass("moving").html("");
						//将复制元素2加入九宫格
						$("#box").append($clone2);
						//交换位置, 复制元素1移动至交换元素处
						$clone.animate($swapEle.position(),400, function(){
							$swapEle.removeClass("moving").html( $clone.html() ); 
							$clone.remove(); //消失，同时交换元素恢复状态
						});
						//复制元素2移动至初始元素处
						$clone2.animate( $(that).position(),400, function(){
							$(that).removeClass("moving").html( $clone2.html() );
							$clone2.remove();//消失，同时初始元素恢复状态
							
						});
					}
				});
			});
			
			
			
		</script>
	</body>
</html>









